<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>爱情配对测试 - 星格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6C5CE7', // 主紫色
                        secondary: '#FD79A8', // 辅助粉色
                        accent: '#00B894', // 强调色
                        dark: '#2D3436',
                        light: '#F8F9FA'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .option-hover {
                @apply transition-all duration-200 hover:shadow-md hover:bg-secondary/5;
            }
            .heart-beat {
                animation: heartbeat 1.5s ease-in-out infinite;
            }
            .float {
                animation: float 3s ease-in-out infinite;
            }
            @keyframes heartbeat {
                0% { transform: scale(1); }
                14% { transform: scale(1.1); }
                28% { transform: scale(1); }
                42% { transform: scale(1.1); }
                70% { transform: scale(1); }
            }
            @keyframes float {
                0%, 100% { transform: translateY(0); }
                50% { transform: translateY(-8px); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark min-h-screen flex flex-col">


    <!-- 主内容区 -->
    <main class="flex-1 pt-5 pb-24 px-4">
        <div class="container mx-auto max-w-md">
            <!-- 测试说明（仅在第一题显示） -->
            <div id="test-instructions" class="bg-white rounded-xl shadow-sm p-5 mb-6">
                <div class="text-center mb-4">
                    <div class="inline-block p-3 rounded-full bg-secondary/10 mb-3">
                        <i class="fa fa-heart text-secondary text-2xl heart-beat"></i>
                    </div>
                    <h2 class="text-lg font-semibold mb-1">爱情配对测试</h2>
                    <p class="text-xs text-gray-500">探索你与伴侣的匹配度</p>
                </div>
                
                <p class="text-sm text-gray-600 mb-3">
                    本测试包含20道题目，将从多个维度评估你与伴侣的匹配程度。请根据你们的真实情况和感受选择最符合的选项。
                </p>
                <p class="text-sm text-gray-600 mb-4">
                    测试结果仅供参考，感情的经营需要双方共同努力哦~
                </p>
                
                <div class="bg-primary/5 rounded-lg p-3 text-sm text-primary mb-4">
                    <i class="fa fa-lightbulb-o mr-2"></i>
                    <span>请与你的伴侣一起完成测试，或根据你对双方的了解来作答</span>
                </div>
                
                <button id="start-test" class="mt-2 w-full bg-secondary text-white py-2.5 rounded-lg text-sm font-medium">
                    开始测试
                </button>
            </div>
            
            <!-- 测试题目容器 -->
            <div id="questions-container" class="hidden">
                <!-- 题目将通过JavaScript动态加载 -->
            </div>
            
            <!-- 测试导航按钮 -->
            <div id="navigation-buttons" class="hidden flex justify-between mt-8">
                <button id="prev-button" class="px-6 py-2 border border-gray-300 rounded-lg text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" disabled>
                    上一题
                </button>
                <button id="next-button" class="px-6 py-2 bg-secondary text-white rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors">
                    下一题
                </button>
            </div>
            
            <!-- 完成测试按钮（最后一题显示） -->
            <div id="finish-button-container" class="hidden mt-8">
                <button id="finish-test" class="w-full py-3 bg-secondary text-white rounded-lg text-sm font-medium hover:bg-secondary/90 transition-colors shadow-md">
                    计算配对指数
                </button>
            </div>
        </div>
    </main>

    <!-- 爱情主题吉祥物 - 漂浮的心形角色 -->
    <div id="love-mascot" class="fixed bottom-24 right-4 w-10 h-10 float z-10 hidden">
        <div class="relative">
            <!-- 心形吉祥物 -->
            <div class="w-full h-full relative">
                <div class="absolute inset-0 bg-secondary rounded-full opacity-20"></div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-secondary text-white rounded-full flex items-center justify-center">
                    <i class="fa fa-heart text-xs"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white shadow-[0_-2px_10px_rgba(0,0,0,0.05)] z-30">
        <div class="container mx-auto">
            <div class="flex justify-around">
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="home-tab">
                    <i class="fa fa-home text-lg"></i>
                    <span class="text-xs mt-1">首页</span>
                </button>
                <button class="tab-button tab-active flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="test-tab">
                    <i class="fa fa-list-alt text-lg"></i>
                    <span class="text-xs mt-1">测试</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="fortune-tab">
                    <i class="fa fa-moon-o text-lg"></i>
                    <span class="text-xs mt-1">运势</span>
                </button>
                <button class="tab-button flex flex-col items-center justify-center py-3 px-4 w-full" data-tab="profile-tab">
                    <i class="fa fa-user-o text-lg"></i>
                    <span class="text-xs mt-1">我的</span>
                </button>
            </div>
        </div>
    </footer>

    <script>
        // 原创爱情配对测试题（20题）
        const questions = [
            {
                id: 1,
                text: "你们对未来的规划（如结婚、生子、定居等）是否一致？",
                options: [
                    { id: "q1a", text: "非常一致，我们有共同的目标", score: 5 },
                    { id: "q1b", text: "基本一致，只有一些小差异", score: 4 },
                    { id: "q1c", text: "部分一致，有一些需要协调的地方", score: 3 },
                    { id: "q1d", text: "不太一致，有较大分歧", score: 2 },
                    { id: "q1e", text: "完全不一致，还没有达成共识", score: 1 }
                ]
            },
            {
                id: 2,
                text: "你们在沟通方面的表现如何？",
                options: [
                    { id: "q2a", text: "非常顺畅，能坦诚表达想法和感受", score: 5 },
                    { id: "q2b", text: "比较顺畅，大部分时候能有效沟通", score: 4 },
                    { id: "q2c", text: "一般，有时会有沟通不畅的情况", score: 3 },
                    { id: "q2d", text: "不太好，经常有误解或不愿表达", score: 2 },
                    { id: "q2e", text: "很差，很少真正理解对方", score: 1 }
                ]
            },
            {
                id: 3,
                text: "你们在处理冲突和分歧时的表现如何？",
                options: [
                    { id: "q3a", text: "能理性沟通，共同寻找解决方案", score: 5 },
                    { id: "q3b", text: "大多数时候能妥善处理，达成共识", score: 4 },
                    { id: "q3c", text: "有时会争执，但最终能和解", score: 3 },
                    { id: "q3d", text: "经常争执，难以达成共识", score: 2 },
                    { id: "q3e", text: "冲突激烈，常冷战或无法解决", score: 1 }
                ]
            },
            {
                id: 4,
                text: "你们在价值观和生活理念上的契合度如何？",
                options: [
                    { id: "q4a", text: "非常契合，对大多数事情看法一致", score: 5 },
                    { id: "q4b", text: "比较契合，核心价值观一致", score: 4 },
                    { id: "q4c", text: "基本契合，有一些小差异", score: 3 },
                    { id: "q4d", text: "不太契合，有不少观念差异", score: 2 },
                    { id: "q4e", text: "很不契合，核心观念有冲突", score: 1 }
                ]
            },
            {
                id: 5,
                text: "你们对彼此的兴趣爱好的接受程度如何？",
                options: [
                    { id: "q5a", text: "完全接受，甚至参与对方的爱好", score: 5 },
                    { id: "q5b", text: "大部分接受，支持对方的爱好", score: 4 },
                    { id: "q5c", text: "基本接受，互不干涉", score: 3 },
                    { id: "q5d", text: "不太接受，有时会反对", score: 2 },
                    { id: "q5e", text: "完全不接受，经常因此产生矛盾", score: 1 }
                ]
            },
            {
                id: 6,
                text: "你们在金钱观念和消费习惯上的匹配度如何？",
                options: [
                    { id: "q6a", text: "非常匹配，消费观念一致", score: 5 },
                    { id: "q6b", text: "比较匹配，主要方面一致", score: 4 },
                    { id: "q6c", text: "基本匹配，有小差异但可接受", score: 3 },
                    { id: "q6d", text: "不太匹配，有明显差异", score: 2 },
                    { id: "q6e", text: "很不匹配，经常因此产生矛盾", score: 1 }
                ]
            },
            {
                id: 7,
                text: "你们在亲密关系和身体接触上的需求是否匹配？",
                options: [
                    { id: "q7a", text: "非常匹配，需求一致", score: 5 },
                    { id: "q7b", text: "比较匹配，基本能满足对方", score: 4 },
                    { id: "q7c", text: "一般，有时需要调整", score: 3 },
                    { id: "q7d", text: "不太匹配，需求有明显差异", score: 2 },
                    { id: "q7e", text: "很不匹配，常因此感到不满", score: 1 }
                ]
            },
            {
                id: 8,
                text: "你们对彼此家人和朋友的态度如何？",
                options: [
                    { id: "q8a", text: "非常接纳，关系融洽", score: 5 },
                    { id: "q8b", text: "比较接纳，相处愉快", score: 4 },
                    { id: "q8c", text: "基本接纳，没有明显矛盾", score: 3 },
                    { id: "q8d", text: "不太接纳，有一些摩擦", score: 2 },
                    { id: "q8e", text: "不接纳，关系紧张", score: 1 }
                ]
            },
            {
                id: 9,
                text: "你们在幽默感和笑点上的契合度如何？",
                options: [
                    { id: "q9a", text: "非常契合，总能get到对方的笑点", score: 5 },
                    { id: "q9b", text: "比较契合，大部分时候能互相逗乐", score: 4 },
                    { id: "q9c", text: "一般，有时能互相逗乐", score: 3 },
                    { id: "q9d", text: "不太契合，经常不理解对方的幽默", score: 2 },
                    { id: "q9e", text: "很不契合，几乎没有共同笑点", score: 1 }
                ]
            },
            {
                id: 10,
                text: "你们在生活习惯上的匹配度如何？",
                options: [
                    { id: "q10a", text: "非常匹配，生活习惯几乎一致", score: 5 },
                    { id: "q10b", text: "比较匹配，主要习惯一致", score: 4 },
                    { id: "q10c", text: "基本匹配，有差异但能适应", score: 3 },
                    { id: "q10d", text: "不太匹配，有明显差异", score: 2 },
                    { id: "q10e", text: "很不匹配，难以适应对方习惯", score: 1 }
                ]
            },
            {
                id: 11,
                text: "你们对彼此的支持程度如何（包括事业、个人成长等）？",
                options: [
                    { id: "q11a", text: "全力支持，是对方最坚实的后盾", score: 5 },
                    { id: "q11b", text: "非常支持，积极鼓励对方", score: 4 },
                    { id: "q11c", text: "基本支持，不反对对方的选择", score: 3 },
                    { id: "q11d", text: "不太支持，有时会反对", score: 2 },
                    { id: "q11e", text: "不支持，经常阻碍对方发展", score: 1 }
                ]
            },
            {
                id: 12,
                text: "你们在独处与陪伴的需求上是否匹配？",
                options: [
                    { id: "q12a", text: "非常匹配，需求一致", score: 5 },
                    { id: "q12b", text: "比较匹配，基本能协调", score: 4 },
                    { id: "q12c", text: "一般，有时需要调整", score: 3 },
                    { id: "q12d", text: "不太匹配，需求有明显差异", score: 2 },
                    { id: "q12e", text: "很不匹配，常因此产生矛盾", score: 1 }
                ]
            },
            {
                id: 13,
                text: "你们对浪漫和仪式感的重视程度是否一致？",
                options: [
                    { id: "q13a", text: "非常一致，都很重视或都不太重视", score: 5 },
                    { id: "q13b", text: "比较一致，态度相近", score: 4 },
                    { id: "q13c", text: "基本一致，有小差异", score: 3 },
                    { id: "q13d", text: "不太一致，态度有明显差异", score: 2 },
                    { id: "q13e", text: "很不一致，一个非常重视一个无所谓", score: 1 }
                ]
            },
            {
                id: 14,
                text: "你们在处理家务和共同责任上的分配是否公平？",
                options: [
                    { id: "q14a", text: "非常公平，分工合理", score: 5 },
                    { id: "q14b", text: "比较公平，基本满意", score: 4 },
                    { id: "q14c", text: "一般，有小的不平衡", score: 3 },
                    { id: "q14d", text: "不太公平，有明显不平衡", score: 2 },
                    { id: "q14e", text: "很不公平，一方承担过多", score: 1 }
                ]
            },
            {
                id: 15,
                text: "你们对彼此的信任程度如何？",
                options: [
                    { id: "q15a", text: "完全信任，毫无保留", score: 5 },
                    { id: "q15b", text: "非常信任，基本没有疑虑", score: 4 },
                    { id: "q15c", text: "一般信任，有一些小疑虑", score: 3 },
                    { id: "q15d", text: "不太信任，有较多疑虑", score: 2 },
                    { id: "q15e", text: "几乎不信任，充满怀疑", score: 1 }
                ]
            },
            {
                id: 16,
                text: "你们在性格上的互补或相似程度如何？",
                options: [
                    { id: "q16a", text: "非常契合，无论是相似还是互补都很和谐", score: 5 },
                    { id: "q16b", text: "比较契合，大部分时候相处融洽", score: 4 },
                    { id: "q16c", text: "一般，有时和谐有时有摩擦", score: 3 },
                    { id: "q16d", text: "不太契合，性格差异带来不少问题", score: 2 },
                    { id: "q16e", text: "很不契合，性格冲突明显", score: 1 }
                ]
            },
            {
                id: 17,
                text: "你们对彼此缺点的包容程度如何？",
                options: [
                    { id: "q17a", text: "完全包容，接受对方的全部", score: 5 },
                    { id: "q17b", text: "大部分包容，能接受主要缺点", score: 4 },
                    { id: "q17c", text: "基本包容，有一些小缺点难以接受", score: 3 },
                    { id: "q17d", text: "不太包容，有不少缺点难以接受", score: 2 },
                    { id: "q17e", text: "很不包容，经常因对方缺点产生矛盾", score: 1 }
                ]
            },
            {
                id: 18,
                text: "你们在旅行和休闲方式上的偏好是否一致？",
                options: [
                    { id: "q18a", text: "非常一致，喜欢相同的方式", score: 5 },
                    { id: "q18b", text: "比较一致，大部分时候偏好相同", score: 4 },
                    { id: "q18c", text: "基本一致，有差异但可协调", score: 3 },
                    { id: "q18d", text: "不太一致，偏好有明显差异", score: 2 },
                    { id: "q18e", text: "很不一致，很难一起规划旅行", score: 1 }
                ]
            },
            {
                id: 19,
                text: "你们在解决问题时的思路和方法是否相似？",
                options: [
                    { id: "q19a", text: "非常相似，总能想到一起", score: 5 },
                    { id: "q19b", text: "比较相似，大部分时候思路一致", score: 4 },
                    { id: "q19c", text: "有差异但能互补，合作良好", score: 3 },
                    { id: "q19d", text: "差异较大，有时难以合作", score: 2 },
                    { id: "q19e", text: "完全不同，经常因此产生分歧", score: 1 }
                ]
            },
            {
                id: 20,
                text: "总体而言，你觉得你们的关系满意度如何？",
                options: [
                    { id: "q20a", text: "非常满意，觉得很幸福", score: 5 },
                    { id: "q20b", text: "比较满意，整体很幸福", score: 4 },
                    { id: "q20c", text: "基本满意，有小的不满", score: 3 },
                    { id: "q20d", text: "不太满意，有较多不满", score: 2 },
                    { id: "q20e", text: "很不满意，幸福感低", score: 1 }
                ]
            }
        ];

        // 当前题目标号
        let currentQuestionIndex = 0;
        // 存储用户答案
        const userAnswers = {};
        // 总得分
        let totalScore = 0;

        // DOM元素
        const testInstructions = document.getElementById('test-instructions');
        const questionsContainer = document.getElementById('questions-container');
        const navigationButtons = document.getElementById('navigation-buttons');
        const prevButton = document.getElementById('prev-button');
        const nextButton = document.getElementById('next-button');
        const finishButtonContainer = document.getElementById('finish-button-container');
        const progressBar = document.getElementById('progress-bar');
        const progressText = document.getElementById('progress-text');
        const timeEstimate = document.getElementById('time-estimate');
        const startTestButton = document.getElementById('start-test');
        const finishTestButton = document.getElementById('finish-test');
        const backButton = document.getElementById('back-button');
        const loveMascot = document.getElementById('love-mascot');

        // 初始化页面
        function init() {
            // 开始测试按钮点击事件
            startTestButton.addEventListener('click', startTest);
            
            // 上一题/下一题按钮点击事件
            prevButton.addEventListener('click', goToPrevQuestion);
            nextButton.addEventListener('click', goToNextQuestion);
            
            // 完成测试按钮点击事件
            finishTestButton.addEventListener('click', calculateResult);
            
            // 返回按钮点击事件
            backButton.addEventListener('click', () => {
                if (confirm('确定要退出测试吗？已完成的测试进度将不会保存。')) {
                    // 返回测试列表页
                    window.location.href = 'index.html#test-tab';
                }
            });
        }

        // 开始测试
        function startTest() {
            testInstructions.classList.add('hidden');
            questionsContainer.classList.remove('hidden');
            navigationButtons.classList.remove('hidden');
            loveMascot.classList.remove('hidden');
            
            // 显示第一题
            renderQuestion(currentQuestionIndex);
            updateProgress();
        }

        // 渲染当前题目
        function renderQuestion(index) {
            const question = questions[index];
            questionsContainer.innerHTML = `
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
                    <h2 class="text-lg font-semibold mb-5">${question.text}</h2>
                    <div class="space-y-2">
                        ${question.options.map(option => `
                            <div class="option-hover p-4 border rounded-lg cursor-pointer ${userAnswers[question.id] === option.id ? 'border-secondary bg-secondary/5' : 'border-gray-200'}" 
                                 onclick="selectOption(${question.id}, '${option.id}', ${option.score})">
                                <div class="flex items-center">
                                    <div class="w-5 h-5 rounded-full border ${userAnswers[question.id] === option.id ? 'border-secondary bg-secondary' : 'border-gray-300'} flex items-center justify-center mr-3">
                                        ${userAnswers[question.id] === option.id ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
                                    </div>
                                    <span>${option.text}</span>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
            
            // 更新导航按钮状态
            prevButton.disabled = index === 0;
            
            // 如果是最后一题，显示完成按钮，隐藏下一题按钮
            if (index === questions.length - 1) {
                nextButton.classList.add('hidden');
                finishButtonContainer.classList.remove('hidden');
            } else {
                nextButton.classList.remove('hidden');
                finishButtonContainer.classList.add('hidden');
            }
        }

        // 选择答案
        function selectOption(questionId, optionId, score) {
            // 如果之前有选择，减去之前的分数
            if (userAnswers[questionId]) {
                const previousOption = questions.find(q => q.id === questionId)
                    .options.find(o => o.id === userAnswers[questionId]);
                totalScore -= previousOption.score;
            }
            
            // 保存用户答案和分数
            userAnswers[questionId] = optionId;
            totalScore += score;
            
            // 重新渲染当前题目以更新选中状态
            renderQuestion(currentQuestionIndex);
        }

        // 前往上一题
        function goToPrevQuestion() {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                renderQuestion(currentQuestionIndex);
                updateProgress();
                // 滚动到顶部
                window.scrollTo(0, 0);
            }
        }

        // 前往下一题
        function goToNextQuestion() {
            // 检查是否已回答当前问题
            if (!userAnswers[questions[currentQuestionIndex].id]) {
                alert('请选择一个答案后再继续。');
                return;
            }
            
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                renderQuestion(currentQuestionIndex);
                updateProgress();
                // 滚动到顶部
                window.scrollTo(0, 0);
            }
        }

        // 更新进度条和时间估计
        function updateProgress() {
            const progress = ((currentQuestionIndex + 1) / questions.length) * 100;
            progressBar.style.width = `${progress}%`;
            progressText.textContent = `${currentQuestionIndex + 1}/${questions.length}`;
            
            // 估计剩余时间（每题约15秒）
            const remainingMinutes = Math.round((questions.length - currentQuestionIndex - 1) * 15 / 60);
            timeEstimate.textContent = `预计剩余时间: ${remainingMinutes}分钟`;
        }

        // 计算测试结果
        function calculateResult() {
            // 检查是否已回答最后一题
            if (!userAnswers[questions[questions.length - 1].id]) {
                alert('请选择一个答案后再完成测试。');
                return;
            }
            
            // 计算匹配度百分比
            const maxScore = questions.length * 5;
            const compatibilityPercentage = Math.round((totalScore / maxScore) * 100);
            
            // 确定匹配度等级和评语
            let compatibilityLevel, comment;
            if (compatibilityPercentage >= 90) {
                compatibilityLevel = "天作之合";
                comment = "你们是非常匹配的一对！无论是价值观还是生活方式都高度契合，好好珍惜这份难得的缘分吧。";
            } else if (compatibilityPercentage >= 70) {
                compatibilityLevel = "非常契合";
                comment = "你们有着很好的匹配度，核心观念一致，小的差异反而能让你们互相学习成长。";
            } else if (compatibilityPercentage >= 50) {
                compatibilityLevel = "基本匹配";
                comment = "你们有一定的匹配度，但也存在一些差异需要协调。通过良好的沟通和互相理解，你们的关系会更加稳固。";
            } else if (compatibilityPercentage >= 30) {
                compatibilityLevel = "有待磨合";
                comment = "你们之间存在不少差异，需要更多的理解和包容。如果双方都愿意为对方改变和适应，关系仍有很好的发展空间。";
            } else {
                compatibilityLevel = "挑战较大";
                comment = "你们之间存在较大差异，需要认真思考是否愿意为这段关系付出额外的努力。坦诚沟通是解决问题的第一步。";
            }
            
            // 显示结果
            questionsContainer.innerHTML = `
                <div class="bg-white rounded-xl shadow-sm p-6 text-center">
                    <div class="inline-block p-4 rounded-full bg-secondary/10 mb-4">
                        <i class="fa fa-heart text-secondary text-3xl heart-beat"></i>
                    </div>
                    
                    <h2 class="text-xl font-bold mb-2">你们的配对指数</h2>
                    <div class="text-3xl font-bold text-secondary mb-3">${compatibilityPercentage}%</div>
                    <div class="bg-secondary/10 text-secondary px-4 py-1 rounded-full inline-block text-sm mb-5">
                        ${compatibilityLevel}
                    </div>
                    
                    <p class="text-gray-600 mb-6">${comment}</p>
                    
                    <div class="bg-primary/5 rounded-lg p-4 text-sm text-primary mb-6">
                        <i class="fa fa-lightbulb-o mr-2"></i>
                        <span>感情需要双方共同经营，测试结果仅供参考，珍惜彼此才是最重要的哦~</span>
                    </div>
                    
                    <button id="restart-test" class="w-full py-2.5 bg-secondary text-white rounded-lg text-sm font-medium mb-3">
                        重新测试
                    </button>
                    <button id="back-to-tests" class="w-full py-2.5 border border-gray-300 text-gray-700 rounded-lg text-sm font-medium">
                        返回测试列表
                    </button>
                </div>
            `;
            
            // 隐藏导航按钮，显示结果
            navigationButtons.classList.add('hidden');
            finishButtonContainer.classList.add('hidden');
            
            // 添加新按钮的事件监听
            document.getElementById('restart-test').addEventListener('click', () => {
                // 重置测试状态
                currentQuestionIndex = 0;
                userAnswers = {};
                totalScore = 0;
                renderQuestion(currentQuestionIndex);
                updateProgress();
                navigationButtons.classList.remove('hidden');
            });
            
            document.getElementById('back-to-tests').addEventListener('click', () => {
                window.location.href = 'index.html#test-tab';
            });
        }

        // 初始化页面
        document.addEventListener('DOMContentLoaded', init);

        // 为返回按钮添加点击事件
        document.getElementById('back-button').addEventListener('click', function() {
            window.location.href = 'index.html';
        });

        // 为Tab按钮添加点击事件
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                // 移除所有活跃状态
                document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('tab-active'));
                // 添加当前活跃状态
                this.classList.add('tab-active');
                
                // 在实际应用中，这里应该跳转到相应的页面
                const tabId = this.getAttribute('data-tab');
                if (tabId !== 'test-tab') {
                    window.location.href = `index.html#${tabId}`;
                }
            });
        });
    </script>
</body>
</html>
